<template>
  <el-form :model="selectInfo" ref="getAlarmMaskState" label-width="60px" class="demo-ruleForm">
    <el-row>
      <el-col :span="8">
        <el-form-item label="网元" prop="me">
          <el-input v-model="selectInfo.me" v-show="isMe" readonly></el-input>
          <el-select v-model="selectInfo.me" v-show="!isMe" placeholder="请选择网元" clearable style="width: 100%">
            <el-option
                v-for="(i,index) in mes"
                :key="index"
                :value="i.label">
            </el-option>
          </el-select>
          <el-select
              v-model="selectInfo.me"
              v-show="false"
              placeholder="请选择">
            <el-option v-for="(nodeName,index) in nodeList"
                       :key="index"
                       :value="nodeName['node-id']">
              <span style="float: left">{{ nodeName['node-id'] }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                  nodeName['netconf-node-topology:connection-status']
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="单板" prop="eq">
          <el-input v-model="selectInfo.eq" v-show="isEq" readonly></el-input>
          <el-select v-model="selectInfo.eq" v-show="!isEq" placeholder="请选择单板" clearable style="width: 100%">
            <el-option
                v-for="(i,index) in eqs"
                :key="index"
                :value="i.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="端口" prop="ptp">
          <el-input v-model="selectInfo.ptp" v-show="isPtp" readonly></el-input>
          <el-select v-model="selectInfo.ptp" v-show="!isPtp" placeholder="请选择端口" clearable style="width: 100%">
            <el-option
                v-for="(i,index) in ptps"
                :key="index"
                :value="i.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "MeEqPtp",
  data() {
    return {
      //消息传输相关
      checkedNode: this.$store.state.clickNode,
      level: '',
      mes: [],
      eqs: [],
      ptps: [],

      clickNode: '',

      isMe: false,
      isEq: false,
      isPtp: false,

      selectInfo: {
        me: '',
        eq: '',
        ptp: '',
      },
      nodeList: [{
        'node-id': '',
        'netconf-node-topology:connection-status': '',
        'netconf-node-topology:port': '',
        'netconf-node-topology:host': '',
      }],
    }
  },
  watch: {
    checkedNode: {
      immediate: true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时。
      handler(newValue, oldValue) {
        console.log('点击节点数据变化了', newValue, oldValue)
        console.log(this.checkedNode.label, ' 层级： ', this.checkedNode.level)
        switch (this.checkedNode.level) {
          case 1:
            //全局视图
            this.mes = this.checkedNode.data.children;
            this.isMe = false;
            this.isEq = false;
            this.isPtp = false;
            break;
          case 2:
            //网元
            this.selectInfo.me = this.checkedNode.data.label;
            this.eqs = this.checkedNode.data.children[0].children;
            this.selectInfo.eq = '';
            this.isMe = true;
            this.isEq = false;
            this.isPtp = false;
            break;
          case 3:
            //机架
            this.selectInfo.me = this.checkedNode.parent.data.label;
            this.eqs = this.checkedNode.data.children;
            this.selectInfo.eq = '';
            this.isMe = true;
            this.isEq = false;
            this.isPtp = false;
            break;
          case 4:
            //单板
            this.selectInfo.me = this.checkedNode.parent.data.label;
            this.selectInfo.eq = this.checkedNode.data.label;
            //console.log('公共模块-端口信息:', data);
            this.ptps = this.checkedNode.data.children;
            this.selectInfo.ptp = '';
            this.isMe = true;
            this.isEq = true;
            this.isPtp = false;
            break;
          case 5:
            //端口
            this.$bus.$on("node-name", (data) => {
              this.selectInfo.me = data;
              //console.log('公共模块-网元信息:', data);
            });
            this.$bus.$on("slot-name", (data) => {
              this.selectInfo.eq = data;
              //console.log('公共模块-槽位信息:', data);
            });

            this.$bus.$on("ptp-name", (data) => {
              this.selectInfo.ptp = data;
              //console.log('公共模块-端口信息:', data);
            });
            this.isMe = true;
            this.isEq = true;
            this.isPtp = true;
            break;

        }

      },
      deep: true
    },

    /*    level: {
          immediate: true, //初始化时让handler调用一下
          //handler什么时候调用？当isHot发生改变时。
          handler(newValue, oldValue) {
            console.log('点击层级变化了', newValue, oldValue)

            console.log(this.clickNode.data.label, ' 层级： ', this.clickNode.level)
            switch (this.clickNode.level) {
              case 1:
                // this.$bus.$on("global:view", (data) => {
                //   this.mes = data;
                //   //console.log('全局视图下的信息', this.mes);
                //   //console.log('公共模块-网元信息:', data);
                // });
                this.mes = this.clickNode.data.children;
                this.isMe = false;
                this.isEq = false;
                this.isPtp = false;
                break;
              case 2:
                /!*          this.$bus.$on("node-name", (data) => {
                            this.selectInfo.me = data;
                            //console.log('公共模块-网元信息:', data);
                          });
                          this.$bus.$on("node:eqs", (data) => {
                            this.eqs = data;
                            // //console.log("--->", this.eqs)
                            //console.log('公共模块-槽位信息:', data);
                          });*!/
                this.selectInfo.me = this.clickNode.data.label;
                this.eqs = this.clickNode.data.children[0].children;
                this.selectInfo.eq = '';
                this.isMe = true;
                this.isEq = false;
                this.isPtp = false;
                break;
              case 3:
                this.$bus.$on("node-name", (data) => {
                  this.selectInfo.me = data;
                });
                this.$bus.$on("node:eqs", (data) => {
                  this.eqs = data;
                });
                this.selectInfo.eq = '';
                this.isMe = true;
                this.isEq = false;
                this.isPtp = false;
                break;
              case 4:
                this.$bus.$on("node-name", (data) => {
                  this.selectInfo.me = data;
                  //console.log('公共模块-网元信息:', data);
                });
                this.$bus.$on("slot-name", (data) => {
                  this.selectInfo.eq = data;
                  //console.log('公共模块-槽位信息:', data);
                });
                this.$bus.$on("node:eqs:ptps", (data) => {
                  //console.log('公共模块-端口信息:', data);
                  this.ptps = data;
                });
                this.selectInfo.ptp = '';
                this.isMe = true;
                this.isEq = true;
                this.isPtp = false;
                break;
              case 5:
                this.$bus.$on("node-name", (data) => {
                  this.selectInfo.me = data;
                  //console.log('公共模块-网元信息:', data);
                });
                this.$bus.$on("slot-name", (data) => {
                  this.selectInfo.eq = data;
                  //console.log('公共模块-槽位信息:', data);
                });

                this.$bus.$on("ptp-name", (data) => {
                  this.selectInfo.ptp = data;
                  //console.log('公共模块-端口信息:', data);
                });
                this.isMe = true;
                this.isEq = true;
                this.isPtp = true;
                // this.ptps = [];
                break;

            }
            // debugger;
            /!*        switch (newValue) {
                      case 0:
                        this.$bus.$on("global:view", (data) => {
                          this.mes = data;
                          //console.log('全局视图下的信息', this.mes);
                          //console.log('公共模块-网元信息:', data);
                        });
                        this.isMe = false;
                        this.isEq = false;
                        this.isPtp = false;
                        break;
                      case 1:
                        this.$bus.$on("node-name", (data) => {
                          this.selectInfo.me = data;
                          //console.log('公共模块-网元信息:', data);
                        });
                        this.$bus.$on("node:eqs", (data) => {
                          this.eqs = data;
                          // //console.log("--->", this.eqs)
                          //console.log('公共模块-槽位信息:', data);
                        });
                        this.selectInfo.eq = '';
                        this.isMe = true;
                        this.isEq = false;
                        this.isPtp = false;
                        break;
                      case 2:
                        this.$bus.$on("node-name", (data) => {
                          this.selectInfo.me = data;
                        });
                        this.$bus.$on("node:eqs", (data) => {
                          this.eqs = data;
                        });
                        this.selectInfo.eq = '';
                        this.isMe = true;
                        this.isEq = false;
                        this.isPtp = false;
                        break;
                      case 3:
                        this.$bus.$on("node-name", (data) => {
                          this.selectInfo.me = data;
                          //console.log('公共模块-网元信息:', data);
                        });
                        this.$bus.$on("slot-name", (data) => {
                          this.selectInfo.eq = data;
                          //console.log('公共模块-槽位信息:', data);
                        });
                        this.$bus.$on("node:eqs:ptps", (data) => {
                          //console.log('公共模块-端口信息:', data);
                          this.ptps = data;
                        });
                        this.selectInfo.ptp = '';
                        this.isMe = true;
                        this.isEq = true;
                        this.isPtp = false;
                        break;
                      case 4:
                        this.$bus.$on("node-name", (data) => {
                          this.selectInfo.me = data;
                          //console.log('公共模块-网元信息:', data);
                        });
                        this.$bus.$on("slot-name", (data) => {
                          this.selectInfo.eq = data;
                          //console.log('公共模块-槽位信息:', data);
                        });

                        this.$bus.$on("ptp-name", (data) => {
                          this.selectInfo.ptp = data;
                          //console.log('公共模块-端口信息:', data);
                        });
                        this.isMe = true;
                        this.isEq = true;
                        this.isPtp = true;
                        // this.ptps = [];
                        break;

                    }*!/

          },

        }*/
  },
  methods: {
    controlData(e) {
      console.log(e.data.label, ' 层级： ', e.level)
      switch (e.level) {
        case 1:
          // this.$bus.$on("global:view", (data) => {
          //   this.mes = data;
          //   //console.log('全局视图下的信息', this.mes);
          //   //console.log('公共模块-网元信息:', data);
          // });
          this.mes = e.data.children;
          this.isMe = false;
          this.isEq = false;
          this.isPtp = false;
          break;
        case 2:
          /*          this.$bus.$on("node-name", (data) => {
                      this.selectInfo.me = data;
                      //console.log('公共模块-网元信息:', data);
                    });
                    this.$bus.$on("node:eqs", (data) => {
                      this.eqs = data;
                      // //console.log("--->", this.eqs)
                      //console.log('公共模块-槽位信息:', data);
                    });*/
          this.selectInfo.me = e.data.label;
          this.eqs = e.data.children[0].children;
          this.selectInfo.eq = '';
          this.isMe = true;
          this.isEq = false;
          this.isPtp = false;
          break;
        case 3:
          this.$bus.$on("node-name", (data) => {
            this.selectInfo.me = data;
          });
          this.$bus.$on("node:eqs", (data) => {
            this.eqs = data;
          });
          this.selectInfo.eq = '';
          this.isMe = true;
          this.isEq = false;
          this.isPtp = false;
          break;
        case 4:
          this.$bus.$on("node-name", (data) => {
            this.selectInfo.me = data;
            //console.log('公共模块-网元信息:', data);
          });
          this.$bus.$on("slot-name", (data) => {
            this.selectInfo.eq = data;
            //console.log('公共模块-槽位信息:', data);
          });
          this.$bus.$on("node:eqs:ptps", (data) => {
            //console.log('公共模块-端口信息:', data);
            this.ptps = data;
          });
          this.selectInfo.ptp = '';
          this.isMe = true;
          this.isEq = true;
          this.isPtp = false;
          break;
        case 5:
          this.$bus.$on("node-name", (data) => {
            this.selectInfo.me = data;
            //console.log('公共模块-网元信息:', data);
          });
          this.$bus.$on("slot-name", (data) => {
            this.selectInfo.eq = data;
            //console.log('公共模块-槽位信息:', data);
          });

          this.$bus.$on("ptp-name", (data) => {
            this.selectInfo.ptp = data;
            //console.log('公共模块-端口信息:', data);
          });
          this.isMe = true;
          this.isEq = true;
          this.isPtp = true;
          // this.ptps = [];
          break;

      }
    }

  },
  mounted() {
    this.controlData(this.$store.state.clickNode);
    this.$nextTick(function () {
      this.$bus.$on('level', (data) => {
        //console.log("告警屏蔽模块 - 所点击层级为：", data)
        this.level = data;
      })
    })

  },
  created() {
    this.$bus.$on('level', (data) => {
      //console.log("告警屏蔽模块 - 所点击层级为：", data)
      this.level = data;
    })
  }
}
</script>

<style scoped>

</style>